<template>
  <div class="app-container">
    <div class="search_wapper">
      <el-form ref="form" :model="form" size="small" label-width="100px">
        <el-row>
          <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
            <el-form-item label="内容ID">
              <el-input v-model="form.id" placeholder="请输入内容ID" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
            <el-form-item label="内容标题">
              <el-input v-model="form.title" placeholder="请输入内容标题" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
            <el-form-item label="展示标题">
              <el-input
                v-model="form.displayTitle"
                placeholder="请输入站外标题或展示标题"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
            <el-form-item label="作者名称">
              <el-input v-model="form.name" placeholder="请输入作者名称" />
            </el-form-item>
          </el-col>
          <el-col :xs="20" :sm="20" :md="6" :lg="4" :xl="4">
            <el-form-item label="来源">
              <el-select v-model="form.source" placeholder="全部" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
            <el-form-item label="内容类型">
              <el-select v-model="form.type" placeholder="全部" />
            </el-form-item>
          </el-col>
          <el-col :xs="20" :sm="20" :md="6" :lg="4" :xl="4">
            <el-form-item label="状态">
              <el-select v-model="form.state" placeholder="全部" />
            </el-form-item>
          </el-col>
          <el-col :xs="10" :sm="10" :md="4" :lg="4" :xl="4">
            <el-form-item>
              <span @click="changeShow" style="display: inline-block">
                <span v-if="showList == true" style="color: #20a0ff"
                  >收起<span class="el-icon-arrow-up"></span
                ></span>
                <span v-else style="color: #20a0ff"
                  >展开<span class="el-icon-arrow-down"></span
                ></span>
              </span>
            </el-form-item>
          </el-col>
        </el-row>
        <div v-show="showList">
          <el-row>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <el-form-item label="更新时间">
                <el-date-picker
                  v-model="form.createAt"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                />
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <el-form-item label="上架时间">
                <el-date-picker
                  v-model="form.updateAt"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  value-format="yyyy-MM-dd HH:mm:ss"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <el-form-item label="分类标签" style="display: inline-block">
                <el-select
                  v-model="form.primaryTag"
                  placeholder="请选择一级分类标签"
                ></el-select>
                <el-select
                  v-model="form.secondaryTag"
                  placeholder="请选择二级分类标签"
                ></el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
              <el-form-item label="车系标签">
                <el-row>
                  <el-select v-model="form.carTag1" placeholder="请选择">
                    <el-option
                      v-for="item in autoLable"
                      :key="item.id"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </el-select>
                  <el-select v-model="form.carTag2" placeholder="奥迪A6L" />
                </el-row>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
              <el-form-item label="运营标签">
                <el-input
                  v-model="form.operationTag"
                  placeholder="请选择运营标签"
                  style="width: 1000px"
                  @focus="handleFoucs"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
        <el-row>
          <el-button type="primary" style="margin-left: 30px"
            >导出数据</el-button
          >
          <el-button style="float: right; margin-right: 10px" @click="reset"
            >重置</el-button
          >
          <el-button type="primary" style="float: right" @click="check"
            >查询</el-button
          >
        </el-row>
      </el-form>
    </div>
    <!-- 弹出选择标签窗口 -->
    <el-dialog
      title="选择运营标签"
      :visible.sync="dialogVisible"
      class="dialogClass"
    >
      <el-divider></el-divider>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>已选标签</span>
        </div>
        <div>
          <el-tag
            v-for="tag in tags"
            :key="tag.name"
            closable
            :type="tag.type"
            style="margin: 0px 10px"
            @close="handleClose(tag)"
          >
            {{ tag.name }}
          </el-tag>
          <el-tag
            v-for="tag in tempTags"
            :key="tag.name"
            closable
            :type="tag.type"
            style="margin: 0px 10px"
            @close="handleClose(tag)"
          >
            {{ tag.name }}
          </el-tag>
        </div>
      </el-card>
      <div style="height: 20px"></div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span style="float: left">可选标签</span>
          <div style="float: right; display: inline-block">
            <el-input
              size="mini"
              placeholder="输入关键字搜索"
              style="width: 200px"
            ></el-input>
            <el-button type="primary" size="mini">搜索</el-button>
          </div>
        </div>
        <div>
          <el-tag
            v-for="tag in optionalTags"
            :key="tag.name"
            :type="tag.type"
            style="margin: 0px 10px"
            effect="plain"
            @click="addTempTag(tag)"
          >
            {{ tag.name }}
          </el-tag>
        </div>
        <div style="margin-bottom: 80px">
          <el-pagination
            class="page_count"
            background
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total, prev, pager, next, jumper, sizes"
            :total="total2"
            @size-change="handleSizeChange2"
            @current-change="handleCurrentChange2"
          />
        </div>
      </el-card>
      <el-divider
        style="display: inline-block; margin-top: 20px; padding: 0px"
      ></el-divider>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 表格内容 -->
    <el-table
      :data="list"
      element-loading-text="Loading"
      border
      :max-height="600"
      highlight-current-row
      style="margin: 30px 0px 0px 30px; width: 98%"
      :header-cell-style="{ background: '#d3d3d3', color: '#606266' }"
      id="rebateSetTable"
    >
      <el-table-column
        label="内容ID"
        align="center"
        width="200"
        style="position: relative"
      >
        <!-- @cell-mouse-leave="showClick = false"
        @cell-mouse-enter="ncrFormat" -->
        <template slot-scope="scope">
          <div
            @mouseover="ncrFormat(scope.row)"
            @mouseleave="showClick = false"
          >
            <div
              style="
                background: rgba(0, 0, 0, 0.5);
                z-index: 100;
                width: 100%;
                height: 100%;
                top: 0;
                left: 0;
                position: absolute;
                color: rgba(255, 255, 255);
                display: table;
              "
              v-if="showClick == true && scope.row.id == showRowid"
            >
              <div style="display: table-cell; vertical-align: middle">
                <span
                  @click.stop="showInfo = true"
                  style="font-size: 20px"
                  @click="view"
                  >查看</span
                >
                <span style="font-size: 20px"> | </span>
                <span @click.stop="showInfo = true" style="font-size: 20px"
                  >编辑</span
                >
                <span style="font-size: 20px"> | </span>
                <span @click="copy" style="font-size: 20px">复制</span>
              </div>
            </div>
            {{ scope.row.id }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="原内容ID" align="center" width="100">
        <template slot-scope="scope">
          {{ scope.row.referId }}
        </template>
      </el-table-column>
      <el-table-column label="内容标题" align="center" width="180">
        <template slot-scope="scope">
          {{ scope.row.title }}
        </template>
      </el-table-column>
      <el-table-column label="站外标题/展示标题" align="center" width="180">
        <template slot-scope="scope">
          {{ scope.row.showTitle }}
        </template>
      </el-table-column>
      <el-table-column label="作者" align="center" width="120">
        <template slot-scope="scope">
          {{ scope.row.author.fullName }}
        </template>
      </el-table-column>
      <el-table-column
        label="来源"
        align="center"
        style="text-align: left"
        prop="biz"
        :formatter="stateFormat"
      >
      </el-table-column>
      <el-table-column label="内容类型" align="center" width="120">
        <template slot-scope="scope">
          {{ scope.row.contentType }}
        </template>
      </el-table-column>
      <el-table-column
        label="状态"
        width="100"
        align="center"
        style="text-align: left"
        prop="onShelve"
        :formatter="stateFormat1"
      >
      </el-table-column>
      <el-table-column prop="status" v-if="false"> </el-table-column>
      <el-table-column label="上架时间" align="center" width="160">
        <template slot-scope="scope">
          {{ scope.row.onShelvedAt }}
        </template>
      </el-table-column>
      <el-table-column label="更新时间" align="center" width="160">
        <template slot-scope="scope">
          {{ scope.row.updatedAt }}
        </template>
      </el-table-column>
      <el-table-column label="浏览数" align="center" width="100">
        <template slot-scope="scope">
          {{ scope.row.statData.pvTotal }}
        </template>
      </el-table-column>
      <el-table-column label="评论数" align="center" width="100">
        <template slot-scope="scope">
          {{ scope.row.statData.cmtCount }}
        </template>
      </el-table-column>
      <el-table-column label="点赞数" align="center" width="100">
        <template slot-scope="scope">
          {{ scope.row.statData.agreeCount }}
        </template>
      </el-table-column>
      <el-table-column label="分享数" align="center" width="100">
        <template slot-scope="scope">
          {{ scope.row.statData.shareCount }}
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" align="center" width="120">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row.id)"
            :type="scope.row.onShelve == true ? 'danger' : 'primary'"
            >{{
              scope.row.onShelve == false
                ? "上架"
                : scope.row.status == "Deleted"
                ? ""
                : "下架"
            }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 标签详情弹出框 -->
    <el-dialog title="内容详情" :visible.sync="showInfo" class="dialogClass">
      <el-divider></el-divider>
      <el-card class="box-card">
        <el-form :model="rowData" class="form">
          <el-row>
            <el-col :xs="24" :sm="24" :md="16" :lg="12" :xl="12">
              <el-form-item>
                <strong>内容ID：</strong>{{ rowData.id }}
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
              <el-form-item>
                <strong>原内容ID：</strong>{{ rowData.referId }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="16" :lg="12" :xl="12">
              <el-form-item>
                <strong>内容类型：</strong>{{ rowData.contentType }}
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
              <el-form-item>
                <strong>作者：</strong>{{ author.fullName }}
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="6">
              <el-form-item>
                <strong>状态：</strong
                >{{ rowData.onShelve ? state1 : "已下架" }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item>
                <strong>内容名称：</strong>{{ rowData.title }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
              <el-form-item>
                <strong>展示名称：</strong>{{ rowData.showTitle }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="16" :lg="6" :xl="6">
              <el-form-item>
                <strong>浏览数：</strong>{{ statData.pvTotal }}
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="16" :lg="6" :xl="6">
              <el-form-item>
                <strong>评论数：</strong>{{ statData.cmtCount }}
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="16" :lg="6" :xl="6">
              <el-form-item>
                <strong>点赞数：</strong>{{ statData.agreeCount }}
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="16" :lg="6" :xl="6">
              <el-form-item>
                <strong>分享数：</strong>{{ statData.shareCount }}
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :xs="24" :sm="24" :md="16" :lg="12" :xl="12">
              <el-form-item>
                <strong>更新时间：</strong>{{ rowData.updatedAt }}
              </el-form-item>
            </el-col>
            <el-col :xs="24" :sm="24" :md="16" :lg="12" :xl="12">
              <el-form-item>
                <strong>上架时间：</strong>{{ rowData.onShelvedAt }}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
      <div style="height: 20px"></div>
      <el-card class="box-card">
        <el-row>
          <strong>分类标签：</strong>
          <el-select placeholder="请选择">
            <el-option> </el-option>
          </el-select>
          <el-select placeholder="请选择">
            <el-option> </el-option>
          </el-select>
        </el-row>
      </el-card>
      <div style="height: 20px"></div>
      <el-card class="box-card">
        <strong style="display: inline-block; width: 100px; margin-bottom: 20px"
          >车系标签：</strong
        >

        <!-- <el-select placeholder="请选择">
              <el-option> </el-option>
            </el-select>
            <el-select placeholder="请选择">
              <el-option> </el-option>
            </el-select> -->
        <el-row>
          <el-form :model="ruleForm">
            <div v-for="(item, index) in ruleForm.condition" :key="item.key">
              <el-col style="width: 200px">
                <el-form-item :prop="'condition.' + index + '.leftId'">
                  <el-select placeholder="请选择">
                    <el-option> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col style="width: 200px">
                <el-form-item :prop="'condition.' + index + '.rightId'">
                  <el-select placeholder="请选择">
                    <el-option> </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col style="width: 200px">
                <el-form-item>
                  <el-button
                    type="danger"
                    plain
                    @click="deleteTag(item, index)"
                    style="margin-left: 10px"
                    v-show="showDelete"
                    >删除</el-button
                  >
                </el-form-item>
              </el-col>
            </div>
          </el-form>
        </el-row>
        <el-button type="primary" plain @click="addTag">添加关联车系</el-button>
      </el-card>
      <div style="height: 20px"></div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <strong>运营标签：</strong>
        </div>
        <div>
          <el-row>
            <span style="float: left">已选标签</span>
            <div style="float: right; display: inline-block">
              <el-input
                size="mini"
                placeholder="输入关键字搜索"
                style="width: 200px"
              ></el-input>
              <el-button type="primary" size="mini">搜索</el-button>
            </div>
          </el-row>
          <el-row>
            <div>
              <el-tag
                v-for="tag in tags"
                :key="tag.name"
                closable
                :type="tag.type"
                style="margin: 20px 10px"
                @close="handleClose1(tag)"
              >
                {{ tag.name }}
              </el-tag>
            </div>
          </el-row>
          <el-divider class="divider"></el-divider>
          <el-row>
            <span style="float: left">可选标签</span>
            <div style="float: right; display: inline-block">
              <el-input
                size="mini"
                placeholder="输入关键字搜索"
                style="width: 200px"
              ></el-input>
              <el-button type="primary" size="mini">搜索</el-button>
            </div>
          </el-row>
          <el-row>
            <div>
              <el-tag
                v-for="tag in tags"
                :key="tag.name"
                closable
                :type="tag.type"
                style="margin: 20px 10px"
              >
                {{ tag.name }}
              </el-tag>
            </div>
          </el-row>
          <el-pagination
            class="page_count"
            background
            :page-sizes="[10, 20, 50, 100]"
            :page-size="10"
            layout="total, prev, pager, next, jumper, sizes"
            :total="total3"
            @size-change="handleSizeChange3"
            @current-change="handleCurrentChange3"
            style="margin-bottom: 20px"
          />
        </div>
      </el-card>
      <div style="height: 20px"></div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <strong>关键词标签：</strong>
        </div>
        <div>
          <el-tag
            v-for="tag in tags"
            :key="tag.name"
            closable
            :type="tag.type"
            style="margin: 20px 10px"
          >
            {{ tag.name }}
          </el-tag>
        </div>
        <el-pagination
          class="page_count"
          background
          :page-sizes="[10, 20, 50, 100]"
          :page-size="10"
          layout="total, prev, pager, next, jumper, sizes"
          :total="total4"
          @size-change="handleSizeChange4"
          @current-change="handleCurrentChange4"
          style="margin-bottom: 20px"
        />
      </el-card>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showInfo = false">取 消</el-button>
        <el-button type="primary" @click="showInfo = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination
      class="page_count"
      background
      :page-sizes="[10, 20, 50, 100]"
      :page-size="10"
      layout="total, prev, pager, next, jumper, sizes"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { getContentList, getDetailContent, getLable } from "@/api/newContent";
export default {
  data() {
    return {
      form: {
        id: "",
        title: "",
        displayTitle: "",
        name: "",
        source: "",
        type: "",
        state: "",
        createAt: "",
        updateAt: "",
        primaryTag: "",
        secondaryTag: "",
        carTag1: "",
        carTag2: "",
        operationTag: "",
      },
      queryData: {
        pageSize: 10,
        pageNum: 1,
        sortBy: "statData.cmtCount",
        asc: false,
      },
      asyncFn: {},
      total: 0,
      total2: 0,
      total3: 0,
      total4: 0,
      totalPage: null,
      showList: false,
      list: [],
      menu: [
        {
          name: "CMS",
          value: "采编发系统",
        },
        {
          name: "PGC",
          value: "麻雀系统",
        },
        {
          name: "HJ",
          value: "太平洋号",
        },
        {
          name: "NBABY",
          value: "新快妈系统",
        },
        {
          name: "PRS",
          value: "推荐系统",
        },
        {
          name: "AUTOVIDEO",
          value: "视频中心",
        },
        {
          name: "QDVIDEO",
          value: "口袋小视频",
        },
        {
          name: "QS",
          value: "专题系统",
        },
        {
          name: "AUTOLIVE",
          value: "直播平台",
        },
      ],
      menu2: [
        {
          name: "Draft",
          value: "草稿",
        },
        {
          name: "Pending",
          value: "审核中",
        },
        {
          name: "Publish",
          value: "发布",
        },
        {
          name: "Reject",
          value: "不通过",
        },
        {
          name: "Withdraw",
          value: "撤回",
        },
        {
          name: "Advance",
          value: "预签",
        },
        {
          name: "Deleted",
          value: "删除",
        },
      ],
      dialogVisible: false,
      tags: [
        { name: "标签一", type: "" },
        { name: "标签二", type: "" },
        { name: "标签三", type: "" },
        { name: "标签四", type: "" },
        { name: "标签五", type: "" },
      ],
      tempTags: [
        { name: "标签一", type: "success" },
        { name: "标签二", type: "success" },
      ],
      optionalTags: [
        { name: "标签一", type: "info" },
        { name: "标签二", type: "info" },
        { name: "标签三", type: "info" },
        { name: "标签四", type: "info" },
        { name: "标签五", type: "info" },
      ],
      showClick: false,
      showRowid: "",
      showInfo: false,
      rowData: [],
      state1: "",
      author: {},
      statData: {},
      autoLable: [],
      autoLable2: [],
      ruleForm: {
        condition: [{ leftId: "", rightId: "" }],
      },
      showDelete: false,
    };
  },
  created() {
    this.asyncFn.asyncGetList = getContentList;
    this.asyncFn.asyncGetDetailContent = getDetailContent;
    this.asyncFn.asyncgetLable = getLable;
    this.fetchData(this.queryData);
    this.asyncFn.asyncgetLable(5).then((res) => {
      this.autoLable = res.tags.content;
      console.log(this.autoLable);
    });
    this.getParams();
  },
  watch: {
    $route: "getParams",
  },
  methods: {
    fetchData(data) {
      // if (this.totalPage !== null && this.queryData.pageNum > this.total) return
      // this.listLoading = true
      this.asyncFn.asyncGetList(data).then((res) => {
        this.list = res.content;
        this.listLoading = false;
        this.totalPage = res.totalPage;
        this.total = res.total;
        // this.queryData.pageNum += 1;
        // console.log(res);
      });
    },
    getParams() {
      const routerParams = this.$route.query.operationLabel;
      this.tags.push({ name: routerParams, type: "" });
    },
    changeShow() {
      this.showList = !this.showList;
    },
    handleSizeChange(val) {
      this.queryData.pageSize = val;
      this.fetchData(this.queryData);
    },
    handleCurrentChange(val) {
      this.queryData.pageNum = val;
      this.fetchData(this.queryData);
    },
    stateFormat(row) {
      return this.menu.find((item) => item.name == row.biz).value;
    },
    stateFormat1(row) {
      if (row.onShelve) {
        return this.menu2.find((item) => item.name == row.status).value;
      } else {
        return "已下架";
      }
    },
    handleFoucs() {
      this.dialogVisible = true;
    },
    handleClose(tag) {
      this.tempTags.indexOf(tag) !== -1 &&
        this.tempTags.splice(this.tempTags.indexOf(tag), 1);
      this.tags.indexOf(tag) !== -1 &&
        this.tags.splice(this.tags.indexOf(tag), 1);
      tag.type = "info";
      let obj = tag;
      this.optionalTags.push(obj);
    },
    handleEdit(row) {},
    reset() {},
    check() {},
    handleSizeChange2(val) {},
    handleCurrentChange2(val) {},
    handleSizeChange3(val) {},
    handleCurrentChange3(val) {},
    handleSizeChange4(val) {},
    handleCurrentChange4(val) {},
    ncrFormat(row) {
      this.showClick = true;
      this.showRowid = row.id;
    },
    copy() {},
    view() {
      this.asyncFn.asyncGetDetailContent(this.showRowid).then((res) => {
        this.rowData = res;
        this.state1 = this.menu2.find((item) => item.name == res.status).value;
        this.author = res.author;
        this.statData = res.statData;
        console.log(res);
      });
    },
    // 动态添加下拉框
    //初始化数据
    initData() {
      this.ruleForm.condition = [];
    },
    // 添加条件
    addTag() {
      this.showDelete = true;
      this.ruleForm.condition.push({
        leftId: "",
        rightId: "",
      });
    },
    // 删除条件
    deleteTag(item, index) {
      if (
        this.ruleForm.condition.length == 2 ||
        this.ruleForm.condition.length == 1
      ) {
        this.showDelete = false;
        if (this.ruleForm.condition.length == 2) {
          let a = this.ruleForm.condition.indexOf(item);
          if (a !== -1) {
            this.ruleForm.condition.splice(index, 1);
          }
        }
      } else {
        let a = this.ruleForm.condition.indexOf(item);
        if (a !== -1) {
          this.ruleForm.condition.splice(index, 1);
        }
      }
    },
    addTempTag(tag) {
      this.optionalTags.indexOf(tag) !== -1 &&
        this.optionalTags.splice(this.optionalTags.indexOf(tag), 1);
      tag.type = "success";
      let obj = tag;
      this.tempTags.push(obj);
    },
  },
};
</script>

<style lang="scss">
.app-container {
  overflow: hidden;
  padding-bottom: 30px;
  ::v-deep thead {
    color: #606266;
  }
  .el-dropdown-link {
    cursor: pointer;
    color: #409eff;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  ::v-deep .el-table .cell {
    line-height: normal;
  }
  .page_count {
    margin-top: 30px;
    float: right;
  }
  ::v-deep .el-pagination__sizes {
    margin-left: 20px;
  }
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 760px;
  margin-left: 15px;
}
.dialogClass .el-dialog__body {
  padding: 0px;
  margin: 0px;
}
.form .el-form-item__content {
  line-height: 12px;
}
.el-divider--horizontal {
  margin: 20px 0px;
  // border-top: 1px dashed #e8eaec;
}
.divider {
  margin: 30px 0;
  background: 0 0;
  border-top: 1px dashed #c2c5c7;
}
</style>
